// src/app/page.tsx
import HomeTabs from "@/components/HomeTabs";
import StatsOverview from "@/components/StatsOverview";
import { Suspense } from "react";
import { Skeleton } from "antd";

export default function HomePage() {
    const homeTabsSkeletonHeight = "400px"; // Example height, please adjust

    return (
        <>
            <main className="container mx-auto py-12 text-center">
                {/* <h1 className="text-4xl font-bold">
                    Welcome to the Multi-Species Hi-C DB
                </h1>
                <p className="mt-4 text-lg text-gray-700">
                    Explore 3D genome data across multiple species.
                </p> */}

                <HomeTabs />

                <StatsOverview />

                <h2 className="text-2xl font-bold mt-12 mb-4">
                    Available Species
                </h2>
                <Suspense
                    fallback={
                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 my-8">
                            {Array.from({ length: 4 }).map((_, idx) => (
                                // <Skeleton.Input
                                //     key={idx}
                                //     active
                                //     style={{ height: 300 }}
                                // />
                                <Skeleton active key={idx}>
                                    <div
                                        style={{
                                            width: 400,
                                            height: 300,
                                            background: "#f0f0f0",
                                        }}
                                    />
                                </Skeleton>
                            ))}
                        </div>
                    }
                >
                </Suspense>
            </main>
        </>
    );
}
